<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="aaton">
    
    <title>
        
            Javascript之字符串操作 |
        
        aaton&#39;s study notes
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/font/css/fontawesome.min.css">

    
<link rel="stylesheet" href="/font/css/regular.min.css">

    
<link rel="stylesheet" href="/font/css/solid.min.css">

    
<link rel="stylesheet" href="/font/css/brands.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en"}
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066cc","logo":"/images/logo.svg","favicon":"/images/logo.svg","avatar":"/images/avatar.svg","font_size":null,"font_family":null,"hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":false,"percent":false}},"local_search":{"enable":false,"preload":false},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"default"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":false},"lazyload":{"enable":false},"comment":{"enable":false,"use":"valine","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":null,"github_admins":null,"repository":null,"client_id":null,"client_secret":null,"proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":true,"custom_label_list":["Trainee","Engineer","Architect"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":false},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"}
    KEEP.language_code_block = {"copy":"Copy code","copied":"Copied","fold":"Fold code block","folded":"Folded"}
    KEEP.language_copy_copyright = {"copy":"Copy copyright info","copied":"Copied","title":"Original article title","author":"Original article author","link":"Original article link"}
  </script>
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.svg">
                </a>
            
            <a class="logo-title" href="/">
               aaton&#39;s study notes
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                ABOUT
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">TAGS</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">ABOUT</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">Javascript之字符串操作</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">aaton</span>
                            
                                <span class="author-label">Lv3</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-06-06 15:41:22</span>
        <span class="mobile">2023-06-06 15:41</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-12-08 17:21:40</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Javascript/">Javascript</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/ES6/">ES6</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/string/">string</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JavaScript%E5%86%85%E7%BD%AE%E6%96%B9%E6%B3%95/">JavaScript内置方法</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>4.7k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>19 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <p><img src="https://s.cn.bing.net/th?id=OHR.CliffsEtretat_ZH-CN9911283373_1920x1080.webp&qlt=50" alt="bing.com-埃特尔塔海岸的白垩悬崖，诺曼底，法国" title="bing.com-埃特尔塔海岸的白垩悬崖，诺曼底，法国"></p>
<p>JavaScript中常见的字符串操作函数及用法。</p>
<span id="more"></span>

<h1 id="1、获取字符串长度"><a href="#1、获取字符串长度" class="headerlink" title="1、获取字符串长度"></a>1、获取字符串长度</h1><h3 id="length"><a href="#length" class="headerlink" title="length"></a>length</h3><p>JavaScript中的字符串有一个length属性，该属性可以用来获取字符串的长度。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const str = &#x27;hello&#x27;;</span><br><span class="line">console.log(str.length);                    // 输出结果：5</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="2、查找给定位置的字符或其字符编码值"><a href="#2、查找给定位置的字符或其字符编码值" class="headerlink" title="2、查找给定位置的字符或其字符编码值"></a>2、查找给定位置的字符或其字符编码值</h1><h3 id="charAt-与charCodeAt"><a href="#charAt-与charCodeAt" class="headerlink" title="charAt()与charCodeAt()"></a>charAt()与charCodeAt()</h3><p>（1）charAt()方法获取到的是<strong>指定位置的字符</strong>。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">const str = &#x27;hello&#x27;;</span><br><span class="line">str.charAt(1);                              // 输出结果：e</span><br></pre></td></tr></table></figure>

<p>我们知道，字符串也可以通过<strong>索引值</strong>来直接获取对应字符，那它和charAt()有什么区别呢？来看例子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const str = &#x27;hello&#x27;;</span><br><span class="line">console.log(str.charAt(1));                 // 输出结果：e</span><br><span class="line">console.log(str[1]);                        // 输出结果：e</span><br><span class="line">console.log(str.charAt(5));                 // 输出结果：&#x27;&#x27;</span><br><span class="line">console.log(str[5]);                        // 输出结果：undefined</span><br></pre></td></tr></table></figure>

<p>（2）charCodeAt()方法获取到的是<strong>指定位置字符的Unicode值</strong>。返回值是0-65535之间的整数，表示给定索引处的UTF-16代码单元；如果指定位置没有字符，将返回NaN。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdefg&quot;;</span><br><span class="line">console.log(str.charCodeAt(1));             // &quot;b&quot; --&gt; 98 输出结果：98</span><br></pre></td></tr></table></figure>

<p>通过这个方法，可以直接获取字符串中指定Unicode编码值范围的字符，比如，数字0～9的Unicode编码范围是: 48～57，可以通过这个方法来筛选字符串中的数字。</p>
<hr>
<h1 id="3、检索字符串是否包含指定字符串"><a href="#3、检索字符串是否包含指定字符串" class="headerlink" title="3、检索字符串是否包含指定字符串"></a>3、检索字符串是否包含指定字符串</h1><h3 id="indexOf"><a href="#indexOf" class="headerlink" title="indexOf()"></a>indexOf()</h3><p>查找某个字符串，<strong>有则返回第一次匹配到的位置</strong>，否则返回-1。</p>
<p>该方法有2个参数：</p>
<ul>
<li><p>searchvalue：必需，规定需检索的字符串值</p>
</li>
<li><p>fromindex：可选的整数参数，规定在字符串中开始检索的位置。它的合法取值是 0 到 string.length - 1。如省略该参数，则默认从字符串的首字符开始检索。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdefgabc&quot;;</span><br><span class="line">console.log(str.indexOf(&quot;a&quot;));          // 输出结果：0</span><br><span class="line">console.log(str.indexOf(&quot;z&quot;));          // 输出结果：-1</span><br><span class="line">console.log(str.indexOf(&quot;c&quot;, 4))        // 输出结果：9</span><br></pre></td></tr></table></figure>

<h3 id="lastIndexOf"><a href="#lastIndexOf" class="headerlink" title="lastIndexOf()"></a>lastIndexOf()</h3><p>查找某个字符，<strong>有则返回最后一次匹配到的位置</strong>，否则返回-1。</p>
<p>该方法有2个参数：</p>
<ul>
<li><p>searchvalue：必需，规定需检索的字符串值</p>
</li>
<li><p>fromindex：可选的整数参数，规定在字符串中开始检索的位置。它的合法取值是 0 到 string.length - 1。如省略该参数，则默认从字符串的首字符开始检索。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcabc&quot;;</span><br><span class="line">console.log(str.lastIndexOf(&quot;a&quot;));      // 输出结果：3</span><br><span class="line">console.log(str.lastIndexOf(&quot;a&quot;,3));    // 输出结果：3</span><br><span class="line">console.log(str.lastIndexOf(&quot;a&quot;,2));    // 输出结果：0</span><br><span class="line">console.log(str.lastIndexOf(&quot;z&quot;));      // 输出结果：-1</span><br></pre></td></tr></table></figure>

<h3 id="includes"><a href="#includes" class="headerlink" title="includes()"></a>includes()</h3><p>该方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。</p>
<p>该方法有2个参数：</p>
<ul>
<li><p>searchvalue：必需，规定需检索的字符串值</p>
</li>
<li><p>fromindex：可选的整数参数，规定在字符串中开始检索的位置，默认为0。它的合法取值是 0 到 string.length - 1。如省略该参数，则默认从字符串的首字符开始检索。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let str = &#x27;Hello world!&#x27;;</span><br><span class="line"></span><br><span class="line">str.includes(&#x27;o&#x27;)                       // 输出结果：true</span><br><span class="line">str.includes(&#x27;z&#x27;)                       // 输出结果：false</span><br><span class="line">str.includes(&#x27;e&#x27;, 2)                    // 输出结果：false</span><br></pre></td></tr></table></figure>

<h3 id="startsWith"><a href="#startsWith" class="headerlink" title="startsWith()"></a>startsWith()</h3><p>该方法用户检测字符串<strong>是否以指定的字符串开始</strong>。如果是以指定的子字符串开头返回 true，否则 false。</p>
<p>该方法有2个参数：</p>
<ul>
<li><p>searchvalue：必需，规定需检索的字符串值</p>
</li>
<li><p>fromindex：可选的整数参数，规定在字符串中开始检索的位置，默认为0。它的合法取值是 0 到 string.length - 1。如省略该参数，则默认从字符串的首字符开始检索。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let str = &#x27;Hello world!&#x27;;</span><br><span class="line"></span><br><span class="line">str.startsWith(&#x27;Hello&#x27;)                 // 输出结果：true</span><br><span class="line">str.startsWith(&#x27;Helle&#x27;)                 // 输出结果：false</span><br><span class="line">str.startsWith(&#x27;wo&#x27;, 6)                 // 输出结果：true</span><br><span class="line">str.startsWith(&#x27;wo&#x27;, 8)                 // 输出结果：false</span><br></pre></td></tr></table></figure>

<h3 id="endsWith"><a href="#endsWith" class="headerlink" title="endsWith()"></a>endsWith()</h3><p>该方法用户检测字符串<strong>是否以指定的字符串结尾</strong>。如果是以指定的子字符串结尾返回 true，否则 false。</p>
<p>该方法有2个参数：</p>
<ul>
<li><p>searchvalue：必需，规定需检索的字符串值</p>
</li>
<li><p>length：设置字符串的长度，默认值为原始字符串长度 string.length。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let str = &#x27;Hello world!&#x27;;</span><br><span class="line"></span><br><span class="line">str.endsWith(&#x27;!&#x27;)                       // 输出结果：true</span><br><span class="line">str.endsWith(&#x27;llo&#x27;)                     // 输出结果：false</span><br><span class="line">str.endsWith(&#x27;llo&#x27;, 5)                  // 输出结果：true</span><br></pre></td></tr></table></figure>

<blockquote>
<p>以上5种方法均区分大小写。</p>
</blockquote>
<hr>
<h1 id="4、字符串连接"><a href="#4、字符串连接" class="headerlink" title="4、字符串连接"></a>4、字符串连接</h1><h3 id="concat"><a href="#concat" class="headerlink" title="concat()"></a>concat()</h3><p>该方法用于连接两个或多个字符串。该方法不会改变原有字符串，会返回连接两个或多个字符串的新字符串。</p>
<p>语法如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string.concat(string1, string2, ..., stringX)</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abc&quot;;</span><br><span class="line">console.log(str.concat(&quot;efg&quot;));                 //输出结果：&quot;abcefg&quot;</span><br><span class="line">console.log(str.concat(&quot;efg&quot;,&quot;hijk&quot;));          //输出结果：&quot;abcefghijk&quot;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>该方法与直接使用操作符➕是一样的效果。</p>
</blockquote>
<hr>
<h1 id="5、字符串分割"><a href="#5、字符串分割" class="headerlink" title="5、字符串分割"></a>5、字符串分割</h1><h3 id="split"><a href="#split" class="headerlink" title="split()"></a>split()</h3><p>该方法将字符串拆分为子字符串数组，操作结果返回新数组，并不会改变原始字符串。</p>
<p>语法如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string.split(separator,limit)</span><br></pre></td></tr></table></figure>

<p>该方法有2个参数：</p>
<ul>
<li><p>separator：必需。字符串或正则表达式，从该参数指定的地方分割 string。</p>
</li>
<li><p>limit：可选。<strong>该参数可指定返回的数组的最大长度</strong>。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdef&quot;;</span><br><span class="line">str.split(&quot;c&quot;);                     // 输出结果：[&quot;ab&quot;, &quot;def&quot;]</span><br><span class="line">str.split(&quot;&quot;, 4)                    // 输出结果：[&#x27;a&#x27;, &#x27;b&#x27;, &#x27;c&#x27;, &#x27;d&#x27;]</span><br><span class="line"></span><br><span class="line">let text = &quot;How are you doing today?&quot;;</span><br><span class="line">console.log(text.split(&quot; &quot;));       // 输出结果：[&#x27;How&#x27;, &#x27;are&#x27;, &#x27;you&#x27;, &#x27;doing&#x27;, &#x27;today?&#x27;]</span><br><span class="line">console.log(text.split());          // 输出结果：[&#x27;How&#x27;, &#x27;are&#x27;, &#x27;you&#x27;, &#x27;doing&#x27;, &#x27;today?&#x27;]</span><br><span class="line">console.log(text.split(&quot; &quot;),3);     // 输出结果：[&#x27;How&#x27;, &#x27;are&#x27;, &#x27;you&#x27;]</span><br></pre></td></tr></table></figure>

<p>在将字符串分割成数组时，可以同时拆分多个分割符，使用正则表达式即可实现:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">const list = &quot;apples,bananas;cherries&quot;</span><br><span class="line">const fruits = list.split(/[,;]/)</span><br><span class="line">console.log(fruits);                // 输出结果：[&quot;apples&quot;, &quot;bananas&quot;, &quot;cherries&quot;]</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="6、字符串截取"><a href="#6、字符串截取" class="headerlink" title="6、字符串截取"></a>6、字符串截取</h1><h3 id="slice"><a href="#slice" class="headerlink" title="slice()"></a>slice()</h3><p>该方法用于提取字符串的某个部分，并以新的字符串返回被提取的部分。</p>
<p>语法如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string.slice(start,end)</span><br></pre></td></tr></table></figure>

<p>该方法有2个参数：</p>
<ul>
<li><p>start：必须。 要截取的片断的起始下标，第一个字符位置，默认为0。如果为负数，则从尾部开始截取。</p>
</li>
<li><p>end：可选。 要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdefg&quot;;</span><br><span class="line">str.slice(1,6);                     // 输出结果：&quot;bcdef&quot;</span><br><span class="line">str.slice(0,6);                     // 输出结果：&quot;abcdef&quot;</span><br><span class="line">str.slice(1);                       // 输出结果：&quot;bcdefg&quot;</span><br><span class="line">str.slice();                        // 输出结果：&quot;abcdefg&quot;</span><br><span class="line">str.slice(-2);                      // 输出结果：&quot;fg&quot;</span><br><span class="line">str.slice(6, 1);                    // 输出结果：&quot;&quot;</span><br><span class="line">str.slice(-4, 6);                   // 输出结果：&quot;def&quot;</span><br><span class="line">str.slice(-4, -1);                  // 输出结果：&quot;def&quot;</span><br><span class="line">str.slice(-4, -2);                  // 输出结果：&quot;de&quot;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>该方法返回的子字符串包括开始处的字符，但不包括结束处的字符。</p>
</blockquote>
<h3 id="substr"><a href="#substr" class="headerlink" title="substr()"></a>substr()</h3><p>该方法用于在字符串中抽取从开始下标开始的指定数目的字符。</p>
<p>语法如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string.substr(start,length)</span><br></pre></td></tr></table></figure>

<p>该方法有两个参数：</p>
<ul>
<li><p>start：必需。要抽取的字符串的下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起始位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。</p>
</li>
<li><p>length：可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdefg&quot;;</span><br><span class="line">str.substr(1,6);                        // 输出结果：&quot;bcdefg&quot;</span><br><span class="line">str.substr(1);                          // 输出结果：&quot;bcdefg&quot; 相当于截取[1,str.length-1]</span><br><span class="line">str.substr();                           // 输出结果：&quot;abcdefg&quot; 相当于截取[0,str.length-1]</span><br><span class="line">str.substr(-1);                         // 输出结果：&quot;g&quot;</span><br><span class="line">str.substr(-4);                         // 输出结果：&quot;defg&quot;</span><br><span class="line">str.substr(2,7);                        // 输出结果：&quot;cdefg&quot;</span><br><span class="line">str.substr(2,4);                        // 输出结果：&quot;cdef&quot;</span><br></pre></td></tr></table></figure>

<h3 id="substring"><a href="#substring" class="headerlink" title="substring()"></a>substring()</h3><p>该方法用于提取字符串中介于两个指定下标之间的字符。</p>
<p>语法如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string.substring(from,to)</span><br></pre></td></tr></table></figure>

<p>该方法有两个参数：</p>
<ul>
<li><p>from：必需。一个非负的整数。规定要提取的子串的第一个字符在string中的位置。</p>
</li>
<li><p>to：可选。一个非负的整数。比要提取的子串的最后一个字符在string中的位置多1。如果省略该参数，则返回的子串会一直到字符串的结尾。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdefg&quot;;</span><br><span class="line">str.substring(1,6);                     // 输出结果：&quot;bcdef&quot; [1,6)</span><br><span class="line">str.substring(1);                       // 输出结果：&quot;bcdefg&quot; [1,str.length-1]</span><br><span class="line">str.substring();                        // 输出结果：&quot;abcdefg&quot; [0,str.length-1]</span><br><span class="line">str.substring(6,1);                     // 输出结果： &quot;bcdef&quot; [1,6)</span><br><span class="line">str.substring(-1);                      // 输出结果：&quot;abcdefg&quot;</span><br><span class="line">str.substring(1,1);                     // 输出结果：&quot;&quot;</span><br></pre></td></tr></table></figure>

<p>如果参数 from 和 to 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 from 比 to 大，那么该方法在提取子串之前会先交换这两个参数。并且该方法不接受负的参数，如果参数是个负数，就会返回这个字符串。</p>
<blockquote>
<p>该方法返回的子串<strong>包含开始处的字符</strong>，但<strong>不包含结束处的字符</strong>。</p>
</blockquote>
<hr>
<h1 id="7、字符串大小写转换"><a href="#7、字符串大小写转换" class="headerlink" title="7、字符串大小写转换"></a>7、字符串大小写转换</h1><h3 id="toLowerCase"><a href="#toLowerCase" class="headerlink" title="toLowerCase()"></a>toLowerCase()</h3><p>该方法用于把字符串转换为小写。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;adABDndj&quot;;</span><br><span class="line">str.toLowerCase();                  // 输出结果：&quot;adabdndj&quot;</span><br></pre></td></tr></table></figure>

<h3 id="toUpperCase"><a href="#toUpperCase" class="headerlink" title="toUpperCase()"></a>toUpperCase()</h3><p>该方法用于把字符串转换为大写。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;adABDndj&quot;;</span><br><span class="line">str.toUpperCase();                  // 输出结果：&quot;ADABDNDJ&quot;</span><br></pre></td></tr></table></figure>

<p>扩展：将字符串中第一个字符变成大写。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let word = &#x27;apple&#x27;</span><br><span class="line">word = word[0].toUpperCase() + word.substr(1)</span><br><span class="line">console.log(word)                   // 输出结果：&quot;Apple&quot;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="8、字符串模式匹配-替换"><a href="#8、字符串模式匹配-替换" class="headerlink" title="8、字符串模式匹配\替换"></a>8、字符串模式匹配\替换</h1><h3 id="replace"><a href="#replace" class="headerlink" title="replace()"></a>replace()</h3><p>该方法用于在字符串中用一些字符替换一些字符，或替换一个与正则表达式匹配的子串。</p>
<p>语法如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">string.replace(searchValue, newValue)</span><br></pre></td></tr></table></figure>

<p>该方法有两个参数：</p>
<ul>
<li><p>searchValue：规定子字符串或要替换的模式的 RegExp 对象。如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。</p>
</li>
<li><p>newValue：必需。一个字符串值。规定了替换文本或生成替换文本的函数。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdef&quot;;</span><br><span class="line">str.replace(&quot;c&quot;, &quot;z&quot;)                   // 输出结果：abzdef</span><br><span class="line"></span><br><span class="line">// 执行一个全局替换：</span><br><span class="line">let str=&quot;Mr Blue has a blue house and a blue car&quot;;</span><br><span class="line">str.replace(/blue/g, &quot;red&quot;);            // 输出结果：&#x27;Mr Blue has a red house and a red car&#x27;</span><br><span class="line">// 并忽略大小写</span><br><span class="line">str.replace(/blue/gi, &quot;red&quot;);           // 输出结果：&#x27;Mr red has a red house and a red car&#x27;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。</p>
</blockquote>
<h3 id="match"><a href="#match" class="headerlink" title="match()"></a>match()</h3><p>该方法用于在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。</p>
<p>该方法的参数 regexp 是必需的，规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdef&quot;;</span><br><span class="line">console.log(str.match(&quot;c&quot;))                 // [&quot;c&quot;, index: 2, input: &quot;abcdef&quot;, groups: undefined]</span><br><span class="line"></span><br><span class="line">let str=&quot;Mr Blue has a blue house and a blue car&quot;;</span><br><span class="line">console.log(str.match(&#x27;blue&#x27;));             // [&#x27;blue&#x27;, index: 14, input: &#x27;Mr Blue has a blue house and a blue car&#x27;, groups: undefined]</span><br><span class="line">console.log(str.match(/blue/g));            // [&#x27;blue&#x27;, &#x27;blue&#x27;]</span><br></pre></td></tr></table></figure>

<blockquote>
<p>该方法返回存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。</p>
</blockquote>
<h3 id="search"><a href="#search" class="headerlink" title="search()"></a>search()</h3><p>该方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。</p>
<p>该方法的参数 regex 可以是需要在 string 中检索的子串，也可以是需要检索的 RegExp 对象。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdef&quot;;</span><br><span class="line">str.search(/bcd/)                           // 输出结果：1</span><br><span class="line">str.search(&#x27;bcd&#x27;)                           // 输出结果：1</span><br><span class="line">str.search(&#x27;Bcd&#x27;)                           // 输出结果：-1</span><br><span class="line">str.search(/Bcd/)                           // 输出结果：-1</span><br><span class="line">str.search(/Bcd/i)                          // 输出结果：1</span><br></pre></td></tr></table></figure>

<blockquote>
<p>要执行忽略大小写的检索，请追加标志 i。该方法不执行全局匹配，它将忽略标志 g，也就是只会返回第一次匹配成功的结果。如果没有找到任何匹配的子串，则返回 -1。</p>
</blockquote>
<blockquote>
<p>返回值： str 中第一个与 regexp 相匹配的子串的起始位置。</p>
</blockquote>
<hr>
<h1 id="9、移除字符串空白字符"><a href="#9、移除字符串空白字符" class="headerlink" title="9、移除字符串空白字符"></a>9、移除字符串空白字符</h1><h3 id="trim"><a href="#trim" class="headerlink" title="trim()"></a>trim()</h3><p>该方法用于移除字符串首尾空白符，该方法不会改变原始字符串。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot; abcdef &quot;;</span><br><span class="line">console.log(str.trim());                    // 输出结果：&quot;abcdef&quot;</span><br><span class="line">let str = &quot; abc  def &quot;;</span><br><span class="line">console.log(str.trim());                    // 输出结果：&quot;abc  def&quot;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>该方法不适用于null、undefined、Number类型。</p>
</blockquote>
<h3 id="trimStart"><a href="#trimStart" class="headerlink" title="trimStart()"></a>trimStart()</h3><p>该方法的行为trim()一致，不过会返回一个<strong>从原始字符串的开头删除了空白字符的新字符串</strong>，不会修改原始字符串。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot; abcdef &quot;;</span><br><span class="line">console.log(str.trimStart());                    // 输出结果：&quot;abcdef &quot;</span><br><span class="line">let str = &quot; abc  def &quot;;</span><br><span class="line">console.log(str.trimStart());                    // 输出结果：&quot;abc  def &quot;</span><br></pre></td></tr></table></figure>

<h3 id="trimEnd"><a href="#trimEnd" class="headerlink" title="trimEnd()"></a>trimEnd()</h3><p>该方法的行为trim()一致，不过会返回一个<strong>从原始字符串的结尾删除了空白字符的新字符串</strong>，不会修改原始字符串。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot; abcdef &quot;;</span><br><span class="line">console.log(str.trimEnd());                    // 输出结果：&quot; abcdef&quot;</span><br><span class="line">let str = &quot; abc  def &quot;;</span><br><span class="line">console.log(str.trimEnd());                    // 输出结果：&quot; abc  def&quot;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="10、获取字符串本身"><a href="#10、获取字符串本身" class="headerlink" title="10、获取字符串本身"></a>10、获取字符串本身</h1><h3 id="valueOf-NaN"><a href="#valueOf-NaN" class="headerlink" title="valueOf()"></a>valueOf()</h3><p>返回某个字符串对象的原始值。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdef&quot;</span><br><span class="line">console.log(str.valueOf())                      // &quot;abcdef&quot;</span><br></pre></td></tr></table></figure>

<h3 id="toString-NaN"><a href="#toString-NaN" class="headerlink" title="toString()"></a>toString()</h3><p>返回字符串对象本身。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;abcdef&quot;</span><br><span class="line">console.log(str.toString())                     // &quot;abcdef&quot;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="11、重复一个字符串"><a href="#11、重复一个字符串" class="headerlink" title="11、重复一个字符串"></a>11、重复一个字符串</h1><h3 id="repeat"><a href="#repeat" class="headerlink" title="repeat()"></a>repeat()</h3><p>返回拥有多个字符串副本的新字符串。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x27;x&#x27;.repeat(3)                               // 输出结果：&quot;xxx&quot;</span><br><span class="line">&#x27;hello&#x27;.repeat(2)                           // 输出结果：&quot;hellohello&quot;</span><br><span class="line">&#x27;na&#x27;.repeat(0)                              // 输出结果：&quot;&quot;</span><br><span class="line"></span><br><span class="line">// 如果参数是小数，会向下取整：</span><br><span class="line">&#x27;na&#x27;.repeat(2.9)                            // 输出结果：&quot;nana&quot;</span><br><span class="line"></span><br><span class="line">// 如果参数是负数或者Infinity，会报错：</span><br><span class="line">&#x27;na&#x27;.repeat(Infinity)                       // RangeError</span><br><span class="line">&#x27;na&#x27;.repeat(-1)                             // RangeError</span><br><span class="line"></span><br><span class="line">// 如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0</span><br><span class="line">&#x27;na&#x27;.repeat(-0.9)                           // 输出结果：&quot;&quot;</span><br><span class="line"></span><br><span class="line">// 如果参数是NaN，就等同于 0</span><br><span class="line">&#x27;na&#x27;.repeat(NaN)                            // 输出结果：&quot;&quot;</span><br><span class="line"></span><br><span class="line">// 如果repeat的参数是字符串，则会先转换成数字</span><br><span class="line">&#x27;na&#x27;.repeat(&#x27;na&#x27;)                           // 输出结果：&quot;&quot;</span><br><span class="line">&#x27;na&#x27;.repeat(&#x27;3&#x27;)                            // 输出结果：&quot;nanana&quot;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="12、补齐字符串长度"><a href="#12、补齐字符串长度" class="headerlink" title="12、补齐字符串长度"></a>12、补齐字符串长度</h1><h3 id="padStart"><a href="#padStart" class="headerlink" title="padStart()"></a>padStart()</h3><p>该方法用于头部补全。该方法有两个参数，其中第一个参数是一个数字，表示字符串补齐之后的长度；第二个参数是用来补全的字符串。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">// 如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串</span><br><span class="line">&#x27;x&#x27;.padStart(1, &#x27;ab&#x27;)                       // &#x27;x&#x27;</span><br><span class="line"></span><br><span class="line">// 如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串</span><br><span class="line">&#x27;x&#x27;.padStart(5, &#x27;ab&#x27;)                       // &#x27;ababx&#x27;</span><br><span class="line">&#x27;x&#x27;.padStart(4, &#x27;ab&#x27;)                       // &#x27;abax&#x27;</span><br><span class="line"></span><br><span class="line">// 如果省略第二个参数，默认使用空格补全长度</span><br><span class="line">&#x27;x&#x27;.padStart(4)                             // &#x27;   x&#x27;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>该方法常用于为数值补全指定位数，例如页码显示1&#x3D;&#x3D;》001</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&quot;1&quot;.padStart(3, &#x27;0&#x27;)                        // 输出结果： &#x27;001&#x27;</span><br><span class="line">&quot;15&quot;.padStart(3, &#x27;0&#x27;)                       // 输出结果： &#x27;015&#x27;</span><br></pre></td></tr></table></figure>

<h3 id="padEnd"><a href="#padEnd" class="headerlink" title="padEnd()"></a>padEnd()</h3><p>该方法用于尾部补全。该方法也是接收两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#x27;x&#x27;.padEnd(5, &#x27;ab&#x27;)                         // &#x27;xabab&#x27;</span><br><span class="line">&#x27;x&#x27;.padEnd(4, &#x27;ab&#x27;)                         // &#x27;xaba&#x27;</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="13、字符串转为数字"><a href="#13、字符串转为数字" class="headerlink" title="13、字符串转为数字"></a>13、字符串转为数字</h1><h3 id="parseInt"><a href="#parseInt" class="headerlink" title="parseInt()"></a>parseInt()</h3><p>该方法用于可解析一个字符串，并返回一个整数。</p>
<p>语法如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">parseInt(string, radix)</span><br></pre></td></tr></table></figure>

<p>该方法有两个参数：</p>
<ul>
<li><p>string：必需。要被解析的字符串。</p>
</li>
<li><p>radix：可选。表示要解析的数字的基数。该值介于2-36之间。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数</span><br><span class="line">parseInt(&quot;10&quot;);			                            // 输出结果：10</span><br><span class="line">parseInt(&quot;17&quot;,8);		                            // 输出结果：15 (8+7)</span><br><span class="line">parseInt(&quot;010&quot;);		                            // 输出结果：10 或 8</span><br><span class="line"></span><br><span class="line">// 当参数 radix 的值以 “0x” 或 “0X” 开头，将以 16 为基数</span><br><span class="line">parseInt(&quot;0x10&quot;)                                    // 输出结果：16</span><br><span class="line"></span><br><span class="line">// 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN</span><br><span class="line">parseInt(&quot;50&quot;, 1)                                   // 输出结果：NaN</span><br><span class="line">parseInt(&quot;50&quot;, 40)                                  // 输出结果：NaN</span><br><span class="line"></span><br><span class="line">// 只有字符串中的第一个数字会被返回，当遇到第一个不是数字的字符为止</span><br><span class="line">parseInt(&quot;40 4years&quot;)                               // 输出结果：40</span><br><span class="line"></span><br><span class="line">// 如果字符串的第一个字符不能被转换为数字，就会返回 NaN</span><br><span class="line">parseInt(&quot;new100&quot;)                                  // 输出结果：NaN</span><br><span class="line"></span><br><span class="line">// 字符串开头和结尾的空格是允许的</span><br><span class="line">parseInt(&quot;  60  &quot;)                                  // 输出结果： 60</span><br></pre></td></tr></table></figure>

<h3 id="parseFloat"><a href="#parseFloat" class="headerlink" title="parseFloat()"></a>parseFloat()</h3><p>该方法可解析一个字符串，并返回一个浮点数。该方法指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。</p>
<p>语法入下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">parseFloat(string)</span><br></pre></td></tr></table></figure>

<p>parseFloat 将它的字符串参数解析成为浮点数并返回。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">// 如果在解析过程中遇到了正负号（+ 或 -）、数字 (0-9)、小数点，或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略。</span><br><span class="line">parseFloat(&quot;10.00&quot;)                                 // 输出结果：10.00</span><br><span class="line">parseFloat(&quot;10.01&quot;)                                 // 输出结果：10.01</span><br><span class="line">parseFloat(&quot;-10.01&quot;)                                // 输出结果：-10.01</span><br><span class="line">parseFloat(&quot;40.5 years&quot;)                            // 输出结果：40.5</span><br><span class="line"></span><br><span class="line">// 如果参数字符串的第一个字符不能被解析成为数字，则 parseFloat 返回 NaN。</span><br><span class="line">parseFloat(&quot;new40.5&quot;)                               // 输出结果：NaN</span><br></pre></td></tr></table></figure>

<p><em><strong>参考文献</strong></em></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://www.w3school.com.cn/jsref/jsref_obj_string.asp" >w3school - JavaScript String 参考手册<i class="fas fa-external-link-alt"></i></a></p>
<p><a class="link"   target="_blank" rel="noopener" href="https://juejin.cn/post/7010928535053271077" >稀土掘金 - JavaScript 28个常用字符串方法及使用技巧<i class="fas fa-external-link-alt"></i></a></p>

            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/ES6/">#ES6</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/string/">#string</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/JavaScript%E5%86%85%E7%BD%AE%E6%96%B9%E6%B3%95/">#JavaScript内置方法</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/12/06/JavaScript%E5%B8%B8%E7%94%A8%E5%85%AC%E5%85%B1%E6%96%B9%E6%B3%95%E4%B9%8B%E5%BE%AE%E7%A7%92%E6%97%B6%E9%97%B4%E6%88%B3%E8%BD%AC%E6%97%A5%E6%9C%9F/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">JavaScript常用公共方法之微秒时间戳转日期</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                               rel="next"
                               href="/2023/06/05/ES6%20%E4%B9%8B%E8%A7%A3%E6%9E%84/"
                            >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">ES6之解构</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                                <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                            </a>
                        </div>
                    
                </div>
            

            
        </div>

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
                <span>2020</span> -
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">aaton</a>
            
        </div>
        
            <script async 
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    Visitor Count&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                
                
                    Totalview&nbsp;<span id="busuanzi_value_site_pv"></span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>







    
<script src="/js/code-block.js"></script>





<div class="post-scripts">
    
        
<script src="/js/post-helper.js"></script>

        
        
    
</div>



</body>
</html>
